/* Shared light header/footer treatment for the Makhraj blue logo. */
:root {
  --makhraj-primary: #053472;
  --makhraj-secondary: #f8a20f;
  --makhraj-primary-soft: #e8f0f8;
  --makhraj-ink: #17324d;
}

/* Hello Elementor adds 30px vertical body padding; keep the site flush to the viewport. */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

#page,
#masthead {
  margin: 0 !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

.elementor-kit-6 {
  --e-global-color-primary: var(--makhraj-primary) !important;
  --e-global-color-secondary: var(--makhraj-secondary) !important;
  --e-global-color-accent: var(--makhraj-secondary) !important;
  --e-global-color-text: var(--makhraj-ink) !important;
}

::selection {
  background: var(--makhraj-secondary);
  color: var(--makhraj-primary);
}

body .elementor-button,
body a.elementor-button {
  background-color: var(--makhraj-primary) !important;
  border-color: var(--makhraj-primary) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

body .elementor-button:hover,
body .elementor-button:focus,
body a.elementor-button:hover,
body a.elementor-button:focus {
  background-color: var(--makhraj-secondary) !important;
  border-color: var(--makhraj-secondary) !important;
  color: var(--makhraj-primary) !important;
  fill: var(--makhraj-primary) !important;
}

body .elementor-widget-text-editor a:not(.elementor-button),
body .elementor-icon-list-text a {
  color: var(--makhraj-primary);
}

body .elementor-widget-text-editor a:not(.elementor-button):hover,
body .elementor-icon-list-text a:hover {
  color: var(--makhraj-secondary);
}

body .elementor-view-default .elementor-icon,
body .elementor-view-framed .elementor-icon,
body .elementor-icon-list-icon i {
  color: var(--makhraj-primary) !important;
  border-color: var(--makhraj-primary) !important;
}

body .elementor-view-default .elementor-icon svg,
body .elementor-view-framed .elementor-icon svg,
body .elementor-icon-list-icon svg {
  fill: var(--makhraj-primary) !important;
}

body .elementor-view-stacked .elementor-icon {
  background-color: var(--makhraj-primary) !important;
}

body .elementor-view-stacked .elementor-icon:hover {
  background-color: var(--makhraj-secondary) !important;
}

body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--makhraj-primary) !important;
  box-shadow: 0 0 0 3px rgba(5, 52, 114, 0.12) !important;
  outline: none;
}

body .elementor-divider-separator {
  border-color: var(--makhraj-primary) !important;
}

/* Homepage product cards keep their blue button and use amber text on hover. */
body.home .product-grid .product-btn:hover,
body.home .product-grid .product-btn:focus {
  color: var(--makhraj-secondary) !important;
}

#masthead .elementor-element-0d17a8e {
  background: #f7f9fc !important;
  border-bottom: 1px solid #d9e3ef;
  box-shadow: 0 4px 18px rgba(5, 52, 114, 0.08);
}

#masthead .hfe-nav-menu__layout-horizontal .hfe-has-submenu-container .hfe-menu-item,
#masthead .hfe-nav-menu__layout-horizontal #menu-1-8a50149 > li > a.hfe-menu-item {
  color: #053472 !important;
}

#masthead .hfe-nav-menu__layout-horizontal .hfe-menu-item:hover,
#masthead .hfe-nav-menu__layout-horizontal .hfe-has-submenu-container .hfe-menu-item:hover {
  color: #f8a20f !important;
}

/* Top-level direct links (Home and Contact) have an older ID-based hover rule. */
#masthead #menu-1-8a50149 > li > a.hfe-menu-item:hover {
  color: #f8a20f !important;
}

#masthead .hfe-nav-menu-icon,
#masthead .hfe-nav-menu-icon i {
  color: #053472 !important;
}

#masthead .hfe-nav-menu__layout-horizontal .sub-menu {
  background: #ffffff !important;
  border: 1px solid #d9e3ef;
  box-shadow: 0 12px 28px rgba(5, 52, 114, 0.14);
}

#masthead .hfe-nav-menu__layout-horizontal .sub-menu .hfe-sub-menu-item {
  color: #17324d !important;
}

#masthead .hfe-nav-menu__layout-horizontal .sub-menu .hfe-sub-menu-item:hover {
  background: #edf4fb !important;
  color: #f8a20f !important;
}

/* Keep parent and submenu hover colors consistent despite legacy menu rules. */
#masthead .elementor-element-8a50149 .hfe-has-submenu-container > a.hfe-menu-item:hover,
#masthead .elementor-element-8a50149 .sub-menu a.hfe-sub-menu-item:hover {
  color: #f8a20f !important;
}

#colophon .elementor-element-f776452 > .elementor-background-overlay {
  background: rgba(241, 246, 252, 0.96) !important;
}

#colophon .elementor-element-f776452,
#colophon .elementor-element-97d118d {
  color: #17324d !important;
}

#colophon .elementor-heading-title,
#colophon .elementor-element-56cfeee,
#colophon .elementor-element-56cfeee p,
#colophon .elementor-element-5ddf1a7,
#colophon .elementor-element-5ddf1a7 p,
#colophon .hfe-nav-menu__layout-vertical .hfe-menu-item,
#colophon .hfe-nav-menu__layout-vertical .hfe-sub-menu-item {
  color: #17324d !important;
}

#colophon .hfe-nav-menu__layout-vertical .sub-menu {
  background: #e2ebf5 !important;
  border: 1px solid #ccd9e7;
}

#colophon .hfe-nav-menu__layout-vertical .hfe-menu-item:hover,
#colophon .hfe-nav-menu__layout-vertical .hfe-sub-menu-item:hover {
  color: #f08a00 !important;
}

@media (max-width: 1024px) {
  #masthead .elementor-element-8a50149 .hfe-nav-menu__layout-horizontal,
  #masthead .elementor-element-8a50149 .hfe-nav-menu__layout-horizontal.hfe-dropdown,
  #masthead .elementor-element-8a50149 .hfe-nav-menu__layout-horizontal.hfe-dropdown-active,
  #masthead .elementor-element-8a50149 .hfe-nav-menu__toggle + nav {
    background: #ffffff !important;
    border: 1px solid #d9e3ef;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 30px rgba(5, 52, 114, 0.15);
    overflow: hidden;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149,
  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li,
  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li > .hfe-has-submenu-container {
    background: #ffffff !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li {
    border-bottom: 1px solid #d9e3ef !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li:last-child {
    border-bottom: 0 !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li > a.hfe-menu-item,
  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li > .hfe-has-submenu-container > a.hfe-menu-item {
    background: transparent !important;
    color: #053472 !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding: 14px 18px !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li > a.hfe-menu-item:hover,
  #masthead .elementor-element-8a50149 #menu-1-8a50149 > li > .hfe-has-submenu-container > a.hfe-menu-item:hover {
    background: #f3f7fc !important;
    color: #f8a20f !important;
  }

  #masthead .elementor-element-8a50149 .sub-arrow,
  #masthead .elementor-element-8a50149 .sub-arrow i,
  #masthead .elementor-element-8a50149 .sub-arrow i::before {
    background: transparent !important;
    color: #053472 !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 .sub-menu,
  #masthead .elementor-element-8a50149 #menu-1-8a50149 .sub-menu * {
    background-color: #f3f7fc !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 .sub-menu a.hfe-sub-menu-item {
    color: #17324d !important;
    padding: 11px 24px !important;
  }

  #masthead .elementor-element-8a50149 #menu-1-8a50149 .sub-menu a.hfe-sub-menu-item:hover {
    background-color: #e5eef8 !important;
    color: #f8a20f !important;
  }

  #masthead .elementor-element-8a50149 .hfe-nav-menu-icon,
  #masthead .elementor-element-8a50149 .hfe-nav-menu-icon i,
  #masthead .elementor-element-8a50149 .hfe-nav-menu-icon svg {
    background: transparent !important;
    color: #053472 !important;
    fill: #053472 !important;
  }
}